<template>
  <div class="main-container">
    <img src="../../assets/logingBg.png" alt="" />
    <!-- 登陆界面 -->
    <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
      <div class="title-box">
        <em class="loginIcon"></em>
        <span>{{ $t('login.title1') }}</span>
        <span>{{ $t('login.title2') }}</span>
        <el-button
          type="primary"
          size="mini"
          class="translate"
          @click="changeLang"
          >{{ $t('login.switch') }}</el-button
        >
        <i></i>
      </div>
      <el-form-item prop="username">
        <el-input :placeholder=" $t('placeholder.username') " v-model="loginForm.username">
          <i slot="prefix" class="el-icon-user-solid"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          :placeholder="$t('placeholder.password') "
          v-model="loginForm.password"
          :type="switchEye ? 'text' : 'password'"
        >
          <i slot="prefix" class="el-icon-lock"></i>
          <i
            slot="suffix"
            class="el-icon-view password-eye"
            :class="switchEye ? 'switch-eye' : ''"
            @click="switchEye = !switchEye"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="login-btn" @click="onLogin">{{
          $t('login.loginIn')
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/user'
export default {
  data() {
    return {
      switchEye: false,
      loginForm: {
        username: 'root@admin.com',
        password: '123456'
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入登录名', trigger: 'blur' },
          {
            min: 3,
            max: 20,
            message: '登录名长度在 3 到 20 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    async onLogin() {
      this.$refs.loginFormRef.validate(async valid => {
        // 验证失败就直接返回
        if (!valid) return
        const sha256 = require('js-sha256').sha256 // 这里用的是require方法
        const encryption = sha256(this.loginForm.password) // 要加密的密码
        const data = {
          username: this.loginForm.username,
          password: encryption
        }
        try {
          const res = await login(data)
          this.$store.commit('saveToken', res.data)
          this.$message({
            message: '登陆成功',
            type: 'success'
          })
          this.$router.push('/home')
        } catch (err) {
          this.$message.error('登录失败，请重试')
        }
      })
    },
    changeLang() {
      this.$confirm('确定？', {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(() => {
          const locale = this.$i18n.locale
          locale === 'zh'
            ? (this.$i18n.locale = 'en')
            : (this.$i18n.locale = 'zh')
        })
        .catch(() => {
          this.$message({
            type: 'info'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.main-container {
  height: 100%;
  background: url('../../assets/bg1.jpg');
  img {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .el-form {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 520px;
    height: 315px;
    padding: 35px 35px 15px 35px;

    background-color: #f5f5f5;
    box-sizing: border-box;
    .loginIcon {
      position: relative;
      display: inline-block;
      top: 5px;
      background: url('../../assets/loginIcon.png');
      width: 35px;
      height: 26px;
    }
    span {
      font-size: 22px;
      padding: 0 10px;
    }

    /deep/ .el-input {
      i {
        padding-left: 10px;
        font-size: 15px;
        vertical-align: -5px;
        color: #889aa4;
      }
      .password-eye {
        padding: 0 10px 0 0;
        cursor: pointer;
      }
      .switch-eye {
        color: #66b1ff;
      }
      .el-input__inner {
        height: 47px;
        padding-left: 45px;
      }
    }
    .login-btn {
      margin-top: 5px;
      width: 450px;
      height: 50px;
      font-size: 20px;
    }
    .title-box {
      position: relative;
      margin-bottom: 15px;
      .translate {
        position: absolute;
        right: 0;
        top: 5px;
      }
    }
  }
}
</style>
